<div class="layuimini-main">
  
    <div class="layuimini-main" >
        <div style="margin: 10px" id="building">
        </div>
        <ul class="dormitory">
        </ul>
        <div style="clear: both">
            <button class="layui-btn layui-btn-normal" id="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<style>
.dormitory{
    margin: 0px;
    padding: 0px;
}
.dormitory li{
    height: 30px;
    line-height:30px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 16px;
    cursor: pointer;
    padding-left: 50px;
    float: left;
    width: 100px;
}
</style>
<script>
    window.onload=function(){
      alert("hello")
    }
    layui.use(['form', 'table','axios','laydate','jquery'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            laydate = layui.laydate,
            $ = layui.$;
        let _buildingId;
       
        let _classId  =window.seletionData().classId;         
        let _gradeId  =window.seletionData().gradeId;
        let _selectionId  =window.seletionData().id;
        
        
        function loadBuilding(){
            axios.get('building/getAll',{}).then(function (response) {
                response.data.list.forEach(item=>{
                    let btn = '<button class="layui-btn layui-btn-primary layui-btn-radius building-btn" key='+item.id+'>'+item.name+'</button>';
                    let btnObj = $(btn);
                    btnObj.click(function () {
                        $(this).siblings().addClass('layui-btn-primary');
                        $(this).removeClass('layui-btn-primary');
                        loadDormitory($(this).attr("key"));
                    });
                    $('#building').append(btnObj);
                })
                $('#building button:first').trigger('click');
            }).catch(function (error) {
                layer.msg(error);
            });
        }
        loadBuilding()

        function dormitory(){
            return axios({
                method:'post',
                url:'dormitory/list',
                data:{"buildingId":_buildingId}
            })
        }
        function selection(){
            return axios({
                method: 'post',
                url:'selectionDormitory/list',
                data:{"classId":_classId,"gradeId":_gradeId,"seletionId":_selectionId}
            })
        }

        function loadDormitory(buildingId){
            _buildingId = buildingId;
            axios.all([dormitory(), selection()]).then(axios.spread(function(response, response2) {
                let seletionArr = response2.data.list.map(item=>item.dormitoryId);
                $('.dormitory').empty();
                response.data.list.forEach(item=>{
                    let flag = seletionArr.some(v=>v==item.id);
                    let obj;
                    if(flag){
                        obj = `<li><input type="checkbox" checked name="dormitoryId" value="${item.id}">${item.no}</li>`
                    }else{
                        obj = `<li><input type="checkbox" name="dormitoryId" value="${item.id}">${item.no}</li>`
                    }
                    $('.dormitory').append(obj);
                })
            })).catch(function (error) {
                console.log(error);
            })
        }

        // 当前弹出层，防止ID被覆盖
        let parentIndex = layer.index;
        $('#saveBtn').click(function () {
            let arr = $('.dormitory input[type="checkbox"]:checked');
            let str = '';
            for(let i=0;i<arr.length;i++){
                str+=arr[i].value+",";
            }
            let param = {"classId":_classId,"gradeId":_gradeId,"dormitoryIds":str,"seletionId":_selectionId}
            
            axios.post('selectionDormitory/add',param).then(function(response){
                layer.msg(response.message,{
                  icon:6,
                  time:2000
                });
                window.reload();
                layer.close(parentIndex);
            }).catch(function (error) {
                layer.msg("请求错误",{
                  icon:5,
                  time:2000,
                  anim:6
                });
            });
        });
    });
</script>